import React from 'react';
import ReactECharts from 'echarts-for-react';

export default function RentStatus({ data, style }) {
  const option = {
    title: { text: '实际租赁情况', left: 'center', top: 10, textStyle: { color: '#00eaff', fontSize: 18, fontWeight: 700 } },
    grid: { left: 0, right: 0, top: 60, bottom: 0 },
    xAxis: { show: false },
    yAxis: { show: false },
    series: [
      {
        type: 'pie',
        radius: ['35%', '50%'],
        center: ['50%', '50%'], // 让饼图整体下移，避免和标题重叠
        label: {
          show: true,
          position: 'outside',
          formatter: '{b}',
          textStyle: { color: '#fff' }
        },
        data: [
          { value: data.rentable, name: '可租赁资产' },
          { value: data.pending, name: '待租资产' },
          { value: data.rented, name: '已租资产' },
          { value: data.expiring, name: '到期资产' }
        ],
        color: ['#00eaff', '#ffb300', '#a020f0', '#ff4d4f']
      }
    ]
  };

  return (
    <div style={{ width: '100%', height: 300, ...style }}>
      <ReactECharts option={option} style={{ width: '100%', height: 245, marginTop: 0 }} />
      <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: 0, color: '#fff', fontSize: 14 }}>
        <div>可租赁资产<br /><b>{data.rentable}</b></div>
        <div>待租资产<br /><b>{data.pending}</b></div>
        <div>已租资产<br /><b>{data.rented}</b></div>
        <div>到期资产<br /><b>{data.expiring}</b></div>
      </div>
    </div>
  );
} 